<template>
  <div class="expertBox">
    <Swiper autoplay="5000">
      <van-swipe-item v-for="item in homeTalentList" :key="item.user_id">
        <ExpertListItemAcross
          :homeTalentList="item"
          @click="handleAuthorDetails(item.user_id)"
        />
        <!--        <ExpertListItemAcross-->
        <!--          :homeTalentList="homeTalentList[1]"-->
        <!--          @click="handleAuthorDetails(homeTalentList[1].user_id)"-->
        <!--        />-->
      </van-swipe-item>
      <!--      <van-swipe-item>-->
      <!--        <ExpertListItemAcross-->
      <!--          :homeTalentList="homeTalentList[2]"-->
      <!--          @click="handleAuthorDetails(homeTalentList[2].user_id)"-->
      <!--        />-->
      <!--        <ExpertListItemAcross-->
      <!--          :homeTalentList="homeTalentList[3]"-->
      <!--          @click="handleAuthorDetails(homeTalentList[3].user_id)"-->
      <!--        />-->
      <!--      </van-swipe-item>-->
    </Swiper>
  </div>
</template>
<script>
import Swiper from "@/components/carousel/Swiper";
import ExpertListItemAcross from "@/views/home/component/ExpertListItemAcross";
import { getTalent } from "@/api/home";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "Expert",
  setup() {
    const homeTalentList = ref([]);
    getTalent(4).then((res) => {
      // console.log(res);
      homeTalentList.value = res.data;
    });
    const router = useRouter();
    const handleAuthorDetails = (value) => {
      router.push(`/authorTable/${value}`);
    };
    return { homeTalentList, handleAuthorDetails };
  },
  components: { ExpertListItemAcross, Swiper },
};
</script>

<style scoped lang="less">
.expertBox {
  width: 100%;
  //height: 5rem;
  box-sizing: border-box;
  border-radius: 1rem;
  overflow: hidden;
  //margin: 3.8rem 0 0.5rem 0;
  //box-shadow: 1px 1px 6px #d4c7c7;
  //border: 1px solid #f5b89e;
}
.listItem {
  border-radius: 0.5rem;
  box-shadow: 0px 1px 4px 0px #c98d61;
}
.van-swipe__track {
  height: 100%;
}
//.van-swipe .van-swipe__indicators{
//  bottom:2px
//}
.van-swipe-item {
  height: 100%;
  padding: 0.2rem 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
